<!DOCTYPE html>
<style>
    body {
	margin:0;
    }

    #mc {
	-webkit-columns: 3;
	-webkit-column-gap: 20px;
	width: 280px;
	margin:20px 100px;
	font: 20px/1 Ahem;
    }

    #log {
	position: absolute;
	top: 101px;
    }
</style>
<div id="log">
    <p id="description"></p>
    <div id="console"></div>
</div>
<div id="mc">
    <div>
        <!-- Here's an empty block to trigger wrapping of the sibling text inside an anonymous block. -->
    </div>xxx xxx xxx xxx xxx xxx xxx xxx xxx</div>
<script src="../../resources/js-test.js"></script>
<script>
    description("Test that hitting an anonymous block child of a multicol container takes us to the right text content.");

    debug("First column:");
    shouldBe("document.caretRangeFromPoint(170,39).startOffset", "3");
    shouldBe("document.caretRangeFromPoint(170,40).startOffset", "7");
    shouldBe("document.caretRangeFromPoint(170,79).startOffset", "11");

    debug("Second column:");
    shouldBe("document.caretRangeFromPoint(270,39).startOffset", "15");
    shouldBe("document.caretRangeFromPoint(270,40).startOffset", "19");
    shouldBe("document.caretRangeFromPoint(270,79).startOffset", "23");

    debug("Third column:");
    shouldBe("document.caretRangeFromPoint(370,39).startOffset", "27");
    shouldBe("document.caretRangeFromPoint(370,40).startOffset", "31");
    shouldBe("document.caretRangeFromPoint(370,79).startOffset", "35");
</script>
